<template>
   <el-dialog :title="t('aigcKnowledge.knowledgeListTip')" :close-on-click-modal="true" width="40%"
        draggable v-model="visible">
        <el-alert type="info" class="w-full mb-2 mt-2 min-alert">
            {{ t('aigcKnowledge.knowledgeSelect') }}
        </el-alert>
        <el-scrollbar>
            <el-table :data="knowledges">
                <el-table-column prop="name" :label="t('aigcApp.knowledgeName')">
                    <template slot-scope="scope">
                        <div class="knowledge-item">
                            <SvgIcon class="text-3xl" :name="'flat-color-icons:document'" :iconify="true" />
                            <span>{{ scope.row.name }}</span>
                            <el-divider v-if="scope.row.ebededModel" vertical/>

                            <el-tag v-if="scope.row.embedModel" type="success" size="small" round>
                                <div class="!flex gap-1 px-1.5">
                                     <SvgIcon :name="'octicon:ai-model-24'" :iconify="true" />
                                     <span>{{ scope.row.embedModel.name }}</span>
                                </div>
                            </el-tag>

                            <el-divider v-if="scope.row.embedStore" class="!mx-1" vertical/>
                            <el-tag v-if="scope.row.embedStore" type="primary" size="small" round>
                                <div class="!flex gap-1 px-1.5">
                                     <SvgIcon :name="'material-symbols:database-outline'" :iconify="true" />
                                     <span>{{ scope.row.embedStore.name }}</span>
                                </div>
                            </el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="80" :label="t('common.action')">
                    <template slot-scope="scope">
                        <el-button type="primary" v-if="!appStore.knowledgeIds.includes(scope.row.id)" circle @click="onAdd(scope.row)"></el-button>
                        <el-button type="danger" circle @click="onRemove(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
   </el-dialog>     
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n';

import { getList } from '/@/api/aigc/knowledge';
import { useMessage } from '/@/hooks/message';
import { useAppStore } from '/@/stores/aigc/appStore';
const visible=ref(false);
const {t} =useI18n();
const appStore=useAppStore();
const knowledges = ref();
async function show(){
    knowledges.value=await getList();
    visible.value=true;
}

function onAdd(item:any){
    appStore.addKnowledge(item);
    useMessage().info(t('common.optSuccessText'));
}
function onRemove(item:any){
    appStore.removeKnowledge(item);
    useMessage().success(t('common.delSuccessText'));
}
</script>

<style lang="css" scoped>
    
</style>